<template>
  <div class='march'>
    <div class="content" v-if="recordLists.length">
      <div class="record-item" v-for="(list,index) in recordLists" :key="list.id">
        <div class="left">
          {{list.status_key}}
        </div>
        <div class="right">
          <p>
            <em>订单编号：</em>
            <span>{{list.sn}}</span>
          </p>
          <p>
            <em>订单状态：</em>
            <span>{{list.statusKey}}</span>
          </p>
          <p>
            <em>订单时间：</em>
            <span>{{list.dateAdd|dateTimeFilter}}</span>
          </p>
          <p>
            <em>申请维护时间：</em>
            <span>{{list.dateService|dateTimeFilter}}</span>
          </p>
          <p>
            <em>维护项目：</em>
            <span>{{list.product}}</span>
          </p>
          <p v-if="list.name">
            <em>服务人员：</em>
            <span>{{list.name}}
              <em>{{list.phone}}</em>
            </span>
          </p>
          <p>
            <em>故障描述：</em>
            <span>{{list.problem}}</span>
          </p>
          <button type="button" class="quit" v-if="list.status_value == 'waiting'" @click="openWin(list)">取消</button>
        </div>
      </div>
    </div>
    <noitem v-else>
      <p slot="tip">暂无记录</p>
    </noitem>
    <!--问题弹窗-->
    <div class="alert" v-show="showAlert">
      <div class="main">
        <h2>提示</h2>
        <p>是否取消订单</p>
      </div>
      <div class="btn">
        <button type="button" @click="showAlert = false">取消</button>
        <button type="button" @click="cancelOrder()">确认</button>
      </div>
    </div>
    <transition name="fade">
      <overlay v-if="showAlert"></overlay>
    </transition>
    <loading v-if="is_loading"></loading>
    <toast v-if="toast">
      <p slot="text">{{toastText}}</p>
    </toast>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      recordLists: [], // 维护项目列表
      showAlert: false,
      order_sn: ""
    };
  },
  created() {
    this.fetchDate();
  },
  filters: {
    dateTimeFilter(date) {
      if (date != null) {
        console.log(date);
        return moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        return "";
      }
    }
  },
  methods: {
    fetchDate() {
      this.isLoading(true);
      this.axios
        .post(root + "/api/order/wx/getMyServiceRecord", {
          wxOpenid: this.token,
          status: 1
        })
        .then(res => {
          this.isLoading(false);
          this.recordLists = res.data.data;
        });
    },
    openWin(list) {
      this.showAlert = true;
      this.order_sn = list.sn;
    },
    cancelOrder() {
      // this.isLoading(true)
      // this.axios.post(root + '/api/order/cancelOrder', { token: this.token, order_sn: this.order_sn }).then((res) => {
      //     this.isLoading(false)
      //     this.showAlert = false
      //     if (res.data.status) {
      //         this.Toast(res.data.message, () => {
      //             this.fetchDate()
      //         })
      //     } else {
      //         this.Toast(res.data.message)
      //     }
      // })
    },
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["is_loading", "token", "toast", "toastText"])
  }
};
</script>

<style lang="less" scoped>
@import "../../../common/style/mixin.less";
.march {
  .content {
    position: relative;
    .record-item {
      display: -webkit-flex;
      align-items: center;
      .ft;
      color: #222;
      padding: 0.35rem 0.35rem 0.35rem 0.5rem;
      &:nth-child(odd) {
        background: #f3f3f3;
      }
      &:nth-child(even) {
        background: #fff;
      }
      .left {
        .layout-center;
        position: relative;
        .wh(0.6rem, 0.6rem);
        .ft;
        color: #fff;
        font-weight: 700;
        margin-right: 0.35rem;
        background: #5b91fe;
        border: 4px solid #fff;
        box-shadow: 0 3px 5px 0 #d0d0d0;
        .br(50%);
        z-index: 2;
      }
      .right {
        flex: 1;
        line-height: 0.5rem;
        p {
          display: -webkit-flex;
        }
        span {
          flex: 3;
        }
        .quit {
          .wh(1.2rem, 0.5rem);
          .ft;
          background: #5b91fe;
          box-shadow: 0 2px 5px 0 rgba(91, 144, 254, 0.5);
          border-radius: 2px;
          .tc;
          color: #fff;
        }
      }
    }
    &:after {
      content: "";
      position: absolute;
      left: 0.84rem;
      top: 0;
      height: 100%;
      width: 1px;
      background: #5b91fe;
    }
  }
}

.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding-top: 0.3rem;
  .br;
  z-index: 1000000;
  min-width: 5rem;
  .main {
    padding: 0 0.3rem;
    h2 {
      .ft(0.28rem);
      font-weight: 700;
      color: #222;
      line-height: 0.55rem;
      .tc;
    }
    p {
      line-height: 1.4;
      margin: 0.3rem 0;
      text-align: center;
    }
  }
  .btn {
    .layout-center;
    width: 100%;
    height: 0.8rem;
    .ft(0.28rem);
    color: #5b91fe;
    .tc;
    border-top: 1px solid #d0d0d0;
    overflow: hidden;
    button {
      flex: 1;
      line-height: 0.8rem;
      .tc;
      &:first-child {
        border-right: 1px solid #d0d0d0;
      }
      &:last-child {
        color: #5b91fe;
      }
    }
  }
}
</style>